<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>课程</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/component/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/assets/style.css}"/>
    <link rel="stylesheet" th:href="@{/assets/global.css}"/>
</head>
<body>
<!-- 顶部 -->
<th:block th:include="edu/front/common/header :: header"/>
<div class="layui-container">
    <div style="margin:12px; height: 180px;background-color: #FFF;padding: 20px;border: 1px solid #f3f3f3;border-radius: 4px;box-shadow: 0 34px 20px -24px rgba(0,36,100,0.06);">
        <form class="layui-form">
            <input type="text" name="classify" id="classify" value="0" class="layui-hide content">
            <input type="text" name="yuyan" id="yuyan" value="0" class="layui-hide content">
            <input type="text" name="isVideo" id="isVideo" value="0" class="layui-hide content">
            <div style="margin-top: 10px;width: 100%;height: 20px;">
                <ul>
                    <span style="float: left;margin-left: 15px;width: 70px;">类别：</span>
                    <li style="float:left;margin-left: 30px;" th:each="item:${classify}"><a
                            class="layui-btn layui-btn-primary layui-btn-xs" th:text="${item.dataLabel}"
                            th:onclick="Classify([[${item.dataValue}]])"/>
                    </li>
                </ul>
            </div>
            <div style="margin-top: 35px;width: 100%;height: 20px;">
                <ul>
                    <span style="float: left;margin-left: 15px;width: 70px;">类型：</span>
                    <li style="float:left;margin-left: 30px;"><a class="layui-btn layui-btn-primary layui-btn-xs"
                                                                 onclick="Type('free')">免费课程</a></li>
                    <li style="float:left;margin-left: 30px;"><a class="layui-btn layui-btn-primary layui-btn-xs"
                                                                 onclick="Type('audition')">试听课程</a></li>
                </ul>
            </div>
            <div class="searchBox">
                <i class="layui-icon layui-icon-search" style="font-size: 30px;"></i>
                <input type="text" id="sea_text" class="searchInput search-inp" autocomplete="off"
                       placeholder="请输入您要查找的源码标题">
                <button type="button" class="layui-btn layui-btn-normal" onclick="Search()">查询</button>
            </div>
        </form>
    </div>
</div>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-sm12" id="demoCardList1">

        </div>
    </div>
</div>
<!-- 项目模板 -->
<script type="text/html" id="demoCardItem1">
    <div class="layui-col-md3 datagrid-item" onclick="Detail({{d.id}})">
        <div class="project-list-item">
            <img class="project-list-item-cover" src="{{d.imageUrl}}"/>
            <div class="project-list-item-body">
                <h2>{{d.name}}</h2>
                <div class="project-list-item-desc">
                    <span class="time">{{d.createTime}}</span>
                    <div class="head-list">
                        <img class="head-list-item" lay-tips="曲丽丽" lay-offset="0,-5px"
                             src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<!-- 底部 -->
<th:block th:include="edu/front/common/footer :: footer"/>
<th:block th:include="edu/front/common/js :: js"/>
<script type="text/javascript" th:src="@{/assets/js/dataGrid.js}"></script>
<script>
    layui.use(['jquery', 'dataGrid'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        var dataGrid = layui.dataGrid;

        var ins = dataGrid.render({
            elem: '#demoCardList1',
            templet: '#demoCardItem1',
            url: '/front/course/page',
            page: {limit: 6, limits: [6, 12, 18, 24, 30]}
        });

        window.Classify = function (classify) {
            var ins = dataGrid.render({
                elem: '#demoCardList1',
                templet: '#demoCardItem1',
                url: '/front/course/page',
                where: {classifyId: classify},
                page: {limit: 6, limits: [6, 12, 18, 24, 30]}
            });
        }

        window.Type = function (type) {
            var ins = dataGrid.render({
                elem: '#demoCardList1',
                templet: '#demoCardItem1',
                url: '/front/course/page',
                where: {type: type},
                page: {limit: 6, limits: [6, 12, 18, 24, 30]}
            });
        }

        window.Search = function () {
            var title = document.getElementById("sea_text").value;
            var ins = dataGrid.render({
                elem: '#demoCardList1',
                templet: '#demoCardItem1',
                url: '/front/course/page',
                where: {name: title},
                page: {limit: 6, limits: [6, 12, 18, 24, 30]}
            });
        }

        window.Detail = function (id) {
            location.href = "/front/course/" + id + "/";
        }
    });
</script>
</body>
</html>